<template>
  <div>
    <Main :type="'form'">
      <div class="wrap">
        <Title :title="'优惠劵详情'" />
        <div class="coupon-container">
          <div class="coupon-heads">
            <div
              class="list-form-title"
              style="font-size: 14px;font-weight: bold;"
            >
              基本属性
            </div>
            <div class="top">
              <p>优惠劵名称：&nbsp;&nbsp;{{ msg.title }}</p>
              <p>
                优惠劵类型：&nbsp;&nbsp;{{
                  msg.type == 0 ? "满减劵" : "折扣劵"
                }}
              </p>
              <p>
                {{ msg.type == 0 ? "减免金额：" : "折扣力度：" }}&nbsp;&nbsp;{{
                  msg.type_money
                }}{{ msg.type == 0 ? "元" : "折" }}
              </p>
              <p>使用条件：&nbsp;&nbsp;满{{ msg.type_condition }}元可使用</p>
              <p v-if="msg.type_time === 1">
                生效时间：&nbsp;&nbsp;{{ msg.stime }} - {{ msg.etime }}
              </p>
              <p v-else>
                生效时间：&nbsp;&nbsp;领取{{ msg.stime }}天后生效，{{
                  msg.etime === 0 ? "永久有效" : `有效期${msg.etime}天`
                }}
              </p>
              <p>库存：&nbsp;&nbsp;{{ msg.stock }}</p>
              <p>
                每人限领：&nbsp;&nbsp;{{
                  msg.user_limit == 0 ? "无限制" : msg.user_limit
                }}
              </p>
            </div>
          </div>
          <div class="coupon-heads">
            <div
              class="list-form-title"
              style="font-size: 14px;font-weight: bold;"
            >
              发放使用
            </div>
            <div class="top">
              {{ msg.type_shop == 0 ? "适用于全部商品" : "适用商品：" }}
              <div class="exclusiveShopBox">
                <div
                  v-for="(item, index) in msg.shop_list"
                  :key="index"
                  class="exclusiveshopbox-chlid"
                >
                  <div class="exclusiveshopbox-chlid-img">
                    <img
                      :src="
                        $store.state.qiniu +
                          item.goods_cover +
                          $store.state.imgRotate
                      "
                      width="100%"
                      height="100%"
                    />
                  </div>
                  <div class="exclusiveshopbox-chlid-font">
                    <div class="one">
                      {{ item.goods_name }}
                    </div>
                    <div class="two">
                      <span v-if="item.low_goods_price == item.up_goods_price"
                        >￥{{ item.low_goods_price }}</span
                      >
                      <span v-else
                        >￥{{ item.low_goods_price }} - ￥{{
                          item.up_goods_price
                        }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Main>
    <Footer>
      <!-- <div> -->
      <div>
        <el-button plain @click="$emit('out', 'list')">返 回</el-button>
        <el-button type="primary" @click="$emit('out', 'edit', msg)"
          >编 辑</el-button
        >
      </div>
      <!-- </div> -->
    </Footer>
  </div>
</template>
<script>
import { GET_COUPON } from "../service";

export default {
  props: {
    lgCouponId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      msg: {
        title: "",
        type: "",
        type_money: "",
        type_condition: "",
        type_shop: "",
        stime: "",
        etime: "",
        stock: "",
        user_limit: "",
        shop_list: []
      }
    };
  },
  created() {
    this.getList();
  },

  methods: {
    async getList() {
      let prams = {
        lg_coupon_id: this.lgCouponId,
        type: 0
      };
      await GET_COUPON(prams).then(({ code, data, msg }) => {
        if (code === 200) {
          data.shop_list.forEach(ele => {
            ele.goods_cover = ele.goods_cover.split(",")[0];
          });
          this.msg = data;
        } else {
          this.$message.error(msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  background: #fff;
}
.coupon-container {
  color: #595961;
  background: #fff;
  border-radius: 5px;
  font-size: 12px;
  .coupon-heads {
    background: #ffffff;
    padding: 8px 30px;
    margin-bottom: 15px;
    border-radius: 5px;
    min-height: 48px;
  }
}
.top {
  width: 100%;
  text-align: left;
  padding: 0 0 20px 60px;
  p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}
.exclusiveShopBox {
  width: 80%;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  .exclusiveshopbox-chlid {
    width: 37%;
    height: 90px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    margin: 10px 10px 0 0;
    padding: 10px 0 0 10px;
    .exclusiveshopbox-chlid-img {
      width: 70px;
      height: 70px;
      overflow: hidden;
      border-radius: 6px;
      float: left;
    }
    .exclusiveshopbox-chlid-font {
      width: 50%;
      height: 70px;
      float: left;
      margin-left: 10px;
      overflow: hidden;
      .one {
        width: 100%;
        height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .two {
        font-size: 12px;
        width: 100%;
        height: 26px;
        line-height: 26px;
        color: #ff2525;
      }
    }
    .exclusiveshopbox-chlid-del {
      float: right;
      width: 32px;
      height: 70px;
      line-height: 70px;
    }
  }
}
</style>
